<template>
  <div class="search-page">
    <FhForm v-bind="searchFromConfig" v-model="formData">
      <template #header>
        <h3 class="header">高级检索</h3>
      </template>
      <template #footer>
        <div class="footer">
          <el-button type="warning" :icon="Refresh" @click="ResetClick"
            >重置</el-button
          >
          <el-button type="primary" :icon="Search" @click="QueryClick"
            >检索</el-button
          >
        </div>
      </template>
    </FhForm>
  </div>
</template>

<script lang="ts">
import FhForm from '@/base-ui/form'
import { defineComponent, ref } from 'vue'
import { Refresh, Search } from '@element-plus/icons-vue'
export default defineComponent({
  components: {
    FhForm
  },
  emits: ['ResetClick', 'QueryClick'],
  props: {
    searchFromConfig: {
      type: Object,
      required: true
    }
  },
  setup(props, { emit }) {
    // 优化一: formData的属性应该动态决定
    const formItems = props.searchFromConfig.formItems ?? []

    const ItemsData: any = {}
    for (const item of formItems) {
      ItemsData[item.field] = ''
    }
    // 组件的双向绑定推荐使用ref,由field值决定
    const formData = ref(ItemsData)

    // 优化二:
    const ResetClick = () => {
      for (const key in ItemsData) {
        formData.value[key] = ItemsData[key]
      }
      emit('ResetClick')
    }
    const QueryClick = () => {
      emit('QueryClick', formData.value)
    }
    return {
      formData,
      Search,
      Refresh,
      ResetClick,
      QueryClick
    }
  }
})
</script>

<style scoped lang="less">
.search-page {
  .header {
    color: red;
  }
  .footer {
    text-align: right;
    padding: 0 50px 20px 0;
  }
}
</style>
